<template>
	<view class="page" v-if="showdata">
		<view class="wrapper" >
			<view v-if="!againRefund&&!isFirst&&pageInfo.status != 2" class="order_status f_40 t-l">{{ pageInfo.status == 1 ? '订单申请退款中' : pageInfo.status == 0 ? '拒绝退款' : '订单已退款'}}</view>
			<view class="header">
				<view class="top dis-flex">
					<view class="icon-box">
						<image :src="isFirst?pageInfo.teacher.headeravatar:pageInfo.course_order.teacher.headeravatar" mode="aspectFill"></image>
					</view>
					<view class="">
						<view class="f_24 name">
							<block v-if="isFirst">
								<!-- 没 -->
								{{ pageInfo.language_grade }}{{ pageInfo.language }}{{ pageInfo.teacher.nickname }}
							</block>
							<block v-else>
								{{ pageInfo.course_order.language_grade }}{{ pageInfo.course_order.language }}{{ pageInfo.course_order.teacher.nickname }}
							</block>
							<!-- 有申请过 -->
						</view>
						<view class="f_20 gery1">
							课程语种：
							<block v-if="isFirst">
								<!-- 没 -->
								<block v-if="pageInfo.classdata == 1">
									{{ pageInfo.language }}授课方式：老师上门.地址信息：{{pageInfo.address }}{{pageInfo.username }}{{pageInfo.phone }}
								</block>
								<block v-else>
									{{ pageInfo.language }}授课方式：老师上门.地址信息：{{pageInfo.address }}{{pageInfo.username }}{{pageInfo.phone }}
								</block>
							</block>
							<block v-else>
								<block v-if="pageInfo.classdata == 1">
									{{ pageInfo.course_order.language }}授课方式：学生上门.地址信息：{{pageInfo.course_order.address }}{{pageInfo.course_order.username }}{{pageInfo.course_order.phone }}
								</block>
									{{ pageInfo.course_order.language }}授课方式：学生上门.地址信息：{{pageInfo.course_order.address }}{{pageInfo.course_order.username }}{{pageInfo.course_order.phone }}
								</block>
							</block>
							<!-- 有申请过 -->
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="dis-flex flex-x-between m-b-18 f_28">
						<view class="gery1">总课次</view>
						<view class="navy_blue">{{ isFirst?pageInfo.num:pageInfo.course_order.num }}课次</view>
					</view>
					<view class="dis-flex flex-x-between m-b-18 f_28">
						<view class="gery1">已上课次</view>
						<view class="navy_blue">{{ isFirst?pageInfo.finish_num:pageInfo.finish_num }}课次</view>
					</view>
					<view class="dis-flex flex-x-between f_28">
						<view class="gery1">剩余课次</view>
						<view class="violet1">{{ isFirst?pageInfo.surplus_num:pageInfo.num }}课次</view>
					</view>
				</view>
			</view>
			<!-- 退款原因 -->
				<view v-if="(isFirst&&pageInfo.surplus_num>0)||againRefund" class="dis-flex cause-box navy_blue f_28 flex-x-between flex-y-center" @click="closeBalanceLowPopup">
					<view class="">退款原因</view>
					<view class="dis-flex flex-y-center" v-if="causeIndex > -1">
						<text>{{ causeList[causeIndex] }}</text>
						<image :src="imgPrefix('/static/image/icon/mine_next_icon.png')"></image>
					</view>
					<view class="gery1 dis-flex flex-y-center" v-else>
						<text>请选择</text>
						<image :src="imgPrefix('/static/image/icon/mine_next_icon.png')"></image>
					</view>
				</view>
				<view class="">
					<block v-if="(isFirst)||againRefund">
						<view v-if="pageInfo.surplus_num>0" class="refund-info">
							<view class="price f_28">
								<text>退款金额：</text>
								<text class="red">￥{{ pageInfo.total_fee }}</text>
							</view>
							<view class="f_22 gery1 disable">不可修改，退款仅为全部未上课次进行退款</view>
							<view class="f_28">退款说明</view>
							<textarea v-model="textarea" placeholder="选填" placeholder-class="font-size:26rpx;" />
						</view>
					</block>
					<block v-else >
						<view class="refund-info">
							<view class="f_24 gery1">退款原因：{{ pageInfo.reason }}</view>
							<view class="f_24 gery1">退款金额：{{ pageInfo.total_fee }}</view>
							<view class="f_24 gery1">申请时间：{{ pageInfo.createtime }}</view>
							<view class="f_24 gery1">退款说明：{{ pageInfo.remark }}</view>
						</view>
					</block>
				</view>
		</view>

		<fixed-bottom>
		<view class="btn-box">
			<view v-if="isFirst||againRefund" class="btn f_32 t-c" :class="[pageInfo.surplus_num==0?'btngray':'']"  @tap="orderRefundCreate">提交申请</view>
			<view v-else-if="pageInfo.status == 1"  class="btn btn_gery f_32 t-c" @tap="orderRefundCancel">取消申请</view>
			<view v-else-if="pageInfo.status == 0||againRefund" class="btn  btn_gery f_32 t-c" @tap="orderRefundAgain">重新申请</view>
		</view>
		</fixed-bottom>
		<zan-popup :show="showBalanceLow" type="bottom" @close="closeBalanceLowPopup">
			<view class="popup">
				<view v-for="(item, index) in causeList" :key="index" class="dis-flex flex-x-between item flex-y-center" @tap.stop="change_status(index)">
					<view class="f_34">{{ item }}</view>
					<view class="status">
						<image lazy-load :src="causeIndex == index ? imgPrefix('/static/image/icon/payment_selected.png') : imgPrefix('/static/image/icon/address_status_0.png')"></image>
					</view>
				</view>
				<view class="cancel t-c f_34" @tap.stop="closeBalanceLowPopup">取消</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
const app = getApp();
import zanPopup from '@/components/popup/index.vue'; //弹出层
import API from '@/static/api/index.js';
export default {
	name: 'index',
	components: {
		zanPopup
	},
	data() {
		return {
			showdata:false,
			pageInfo: {},
			causeList: ['不需要上课了', '没时间上课了', '其他'],
			causeIndex: -1,
			textarea: '',
			showBalanceLow: false, //是否地址弹出层
			explain: '', //退款说明
			isRequet: false,
			againRefund:false,//是否重新申请
			isFirst:true//为true时为申请
		};
	},
	onLoad(option) {
		if(option.hasOwnProperty('orderId')){ // 申请退款
			this.orderRefund(option.orderId);
		}else{ // 在退款状态了
			this.orderRefundRead(option.refundId);
			this.isFirst = false
		}
	},
	methods: {
		// 关闭弹窗事件
		closeBalanceLowPopup(delay = 0) {
			setTimeout(() => {
				this.showBalanceLow = !this.showBalanceLow;
			}, delay);
		},
		change_status(index) {
			this.causeIndex = index;
			this.closeBalanceLowPopup();
		},
		orderRefund(id) {
			API.orderRefund(id).then(res => {
				app._log(res);
				if (res.code == 1) {
					this.pageInfo = res.data.course_order;
					this.showdata=true
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			});
		},
		orderRefundRead(id) {
			API.orderRefundRead(id).then(res => {
				app._log(res);
				if (res.code == 1) {
					this.pageInfo = res.data.course_refund;
					this.showdata=true
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			});
		},
		//提交申请
		orderRefundCreate() {
			if(this.pageInfo.surplus_num==0){
			}else{
				app.requestSubscribeMessage('refund_result',()=>{
				let { isRequet, causeIndex, causeList, textarea, pageInfo } = this;
				let that = this
				if (!isRequet) {
					if (causeIndex == -1) {
						this.showToast('请选择退款原因');
					} else {
						uni.showModal({
						    title: '提示',
						    content: '小程序当前仅支持从未授课订单的全额退款或剩余课程退款。如需进行课包单次课程退款，用户需联系可语客服进行退款喔！',
						    success: function (res) {
						        if (res.confirm) {
						            that.isRequet = true;
						            let data = { course_order_id: pageInfo.course_order_id, reason: causeList[causeIndex], remark: textarea };
						            API.orderRefundCreate(data)
						            	.then(res => {
						            		app._log(res);
						            		if (res.code == 1) {
						            			that.showToast('已提交申请，等待审核中');
						            			setTimeout(() => {
						            				uni.navigateBack({
						            					delta: 1
						            				});
						            			}, 1500);
						            		} else {
						            			that.showToast(res.msg||'请稍后重试');
						            			that.isRequet = false;
						            		}
						            	})
						            	.catch(err => {
						            		that.showToast('请稍后重试');
						            		that.isRequet = false;
						            	});
						        }
						    }
						});
						
					}
				}
				});
			}
			
		},
		//取消申请
		orderRefundCancel(){
			let {isRequet,pageInfo}=this;
			if(!isRequet){
				this.isRequet=true
				uni.showModal({
					content: '是否取消申请？',
					success: res => {
						if (res.confirm) {
							API.orderRefundCancel(pageInfo.course_refund_id).then(res => {
								if (res.code == 1) {
									this.showToast('取消成功，正在跳转');
									setTimeout(()=>{
										uni.navigateBack({})
									},1500)
								} else {
									this.isRequet=false
									this.showToast(res.data.msg || '请稍后重试');
								}
							}).catch(res => {
									this.isRequet=false
								this.showToast('请稍后重试');
							});
						}
					}
				});
			}
		},
		orderRefundAgain(){//再次申请
			this.textarea=''
			this.againRefund=true
		}
	}
};
</script>

<style lang="scss" scoped>
	
.btngray{
	background-color: #f0f0f6!important;
	color: #252748;
	background-image:none!important;
}
.wrapper {
	padding: 24rpx 48rpx 0 48rpx;
	.order_status{
		padding-bottom: 24rpx;
	}
	.header {
		margin-bottom: 16rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		.top {
			padding: 24rpx 0;
			margin: 0 24rpx;
			border-bottom: 1px solid #f2f2f2;
			.icon-box {
				image {
					width: 128rpx;
					height: 128rpx;
					margin-right: 16rpx;
				}
			}
			.name {
				margin-bottom: 12rpx;
			}
		}
		.bottom {
			padding: 24rpx;
			.m-b-18 {
				margin-bottom: 18rpx;
			}
		}
	}
	//退款原因
	.cause-box {
		border-radius: 16rpx;
		background-color: white;
		padding: 24rpx;
		margin-bottom: 16rpx;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	// 退款信息
	.refund-info {
		border-radius: 16rpx;
		background-color: white;
		padding: 24rpx;
		.disable {
			margin: 10rpx 0 34rpx 0;
		}
		textarea {
			padding: 16rpx;
			margin-top: 10rpx;
			background: #fafafa;
			width: 100%;
			font-size: 26rpx;
		}
		.f_24:not(:last-child){
			margin-bottom: 24rpx;
		}
	}
}
.btn-box {
	width: 100vw;
	background-color: #ffffff;
	box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(237, 237, 237, 0.6);
	.btn {
		margin: 12rpx 48rpx;
		line-height: 92rpx;
		border-radius: 24rpx;
		&:not(.btn_gery){
		color: #ffffff;
			background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
		}
		&.btn_gery{
			color: #252748;
			background-color: #F0F0F6;
		}
	}
}
.popup {
	width: 750rpx;
	background-color: white;
	.item {
		line-height: 112rpx;
		padding: 0 48rpx;
	}
	.status {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.cancel {
		line-height: 112rpx;
		background-color: #ffffff;
		border-top: 16rpx solid #f4f4f4;
		color: #f84136;
	}
}
</style>
